<template>
  <div class="header">
        <div class="time">
            <span>{{getDay()}}</span>
            <span>{{getMonth()}}</span>
        </div>
        <div class="search">
            <van-search
        class="search"
        shape="round"
        v-model="searchWord"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      >
      <!-- <template #label>
        
      </template> -->
           <template #action>
            <span @click="onClickButton" style="color: white; font-family: '宋体';">搜索</span>
           </template>
       </van-search>
        </div>
  </div>
</template>

<script setup>
import {ref,reactive,onMounted,onBeforeMount} from "vue"
import{useRouter}from 'vue-router'
const router =useRouter();  
import { Toast, Dialog } from 'vant';
import 'vant/es/toast/style'

// //定义日期数据

const getMonth=()=>{
  const currentDate = new Date();
   const monthNames = [
    "一月", "二月", "三月", "四月", "五月", "六月",
    "七月", "八月", "九月", "十月", "十一月", "十二月"
   ];
   const month = monthNames[currentDate.getMonth()];
   return month;
}

const getDay=()=>{
  const currentDate = new Date();
  const day = currentDate.getDate();
  return day
}

const searchWord=ref('')

const onSearch=(searchWord)=>{
  Toast(searchWord)
}
const onCancel=()=>{
  console.log('取消了')
}



</script>

<style lang="scss" scoped>
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: var(--gh-primary);
    border-radius: 10px;
    .time{
        padding-left:15px;
        padding-right: 10px;
        border-right: 1px solid #ddd;
        color:#fff;
        span{
            display: block;
            height: 20px;
            line-height: 20px;
            font-size: 20px;
            font-family: '宋体';
            text-align: center;
            &:nth-child(2){
                padding-top: 3px;
                height: 15px;
                line-height: 15px;
                font-size: 12px;
            }
        }

    }
    .search{
        flex:1;
        border-radius: 10px;
        .van-search{
         background-color: var(--gh-primary);
    }
     }   
}
   


</style>
